<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="Liang wei">
		<meta name="viewport" content="width= device-width , user-scalable=no,initial-scale=1.0" />
		<link rel="stylesheet" href="css/header.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<link rel="stylesheet" href="css/club.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<title></title>
	</head>
	<body>
		<header>
				<img src="img/logo.png"  />
				<form class="search" action="">
					<input class="search_text" type="text" placeholder="搜索" />
				</form>
				<!--<a id="login" href="#">登录</a>
				<a id="signin" href="#">注册</a>-->
				
			</header>
			
			<br/>
			
			
			<div id="club">
				<p class="rank">最具人气</p>
				<ul>
					<li v-for="ranks in clubList">
						
					  <a :href="'clubDetail.html?id='+ranks.id"><img :src="'http://172.24.10.175/workout/Uploads/'+ranks.thumb"/></a>
					  <a :href="'clubDetail.html?id='+ranks.id"><p>{{ranks.club_name}}</p></a>
					</li>
					
				</ul>
		
                <p class="near" >离我最近</p>
				<!--<p class="rank" >离我最近</p>-->
				<ul>
					<li v-for="nears in nearList">
					<a :href="'clubDetail.html?id='+ranks.id"><img :src="'http://172.24.10.175/workout/Uploads/'+nears.thumb"/></a>
					<a :href="'clubDetail.html?id='+ranks.id"><p>{{nears.club_name}}</p></a>
					</li>
					
				</ul>
			
			</div>
			
			
			
			
		<div class="footer_box">
	           <a href="train2.html"><img src="img/步数.png"/>训练</a>     
               <a href="club.html"><img src="img/运动.png"/>俱乐部</a>
               <a href="index.html"><img src="img/设备.png"/>约建</a>
               <a href="showpicture.html"><img src="img/活动.png"/>晒图</a>   
              <a href="wode.html"><img src="img/首页.png"/>我的</a>
        </div>
			
			
			
			<script>
				var club=new Vue({
				el:"#club",
				data:{
					clubList:[],
					nearList:[]
					
				 },
				mounted:function(){
					this.getData();
				},
				methods:{
					getData:function(){
					    $.ajax({
				           type:"get",
				           
				           url:"http://172.24.10.175/workout/api.php/lists/mod/club",
				           async:true,
				           dataType:"jsonp",
				           success:function(data){	      	   		          
	      	   		              for(var i=0;i<data.length;i++){
	      	   		              	club.clubList.push(data[i]);
	      	   		              }
	      	   	           }
			            });
			      $.ajax({
				           type:"get",
				           url:"http://172.24.10.175/workout/api.php/nearclub",
				           async:true,
				           dataType:"jsonp",
				           success:function(data){	      	   		          
	      	   		              for(var i=0;i<data.length;i++){
	      	   		              	club.nearList.push(data[i]);
	      	   		              }
	      	   	           }
			            });
					}
				}
			});
			</script>
	</body>
</html>
